<template>
  <div class="link-type-block">
    <el-form-item label="标题：" :prop="`${propPrefix}.title`" :rules="titleRequire ? commonRules.notNullRule : []" label-width="110px">
      <el-input v-model="linkObj.title" placeholder="建议12个字以内，选填" maxLength="12"></el-input>
    </el-form-item>
    <el-form-item label="跳转类型：" :prop="`${propPrefix}.jumpType`" label-width="110px">
      <el-radio v-for="(item, index) in jumpTypes" v-model="linkObj.jumpType" :label="item.val" :key="index">{{item.name}}</el-radio>
    </el-form-item>
    <el-form-item v-if="linkObj.jumpType===2" label="URL地址：" :prop="`${propPrefix}.jumpUrl`" :rules="commonRules.urlRule" label-width="110px">
      <el-input v-model="linkObj.jumpUrl" placeholder="http(s)://"></el-input>
    </el-form-item>
    <template v-else-if="linkObj.jumpType===3">
      <el-form-item label="内页类型：" :prop="`${propPrefix}.jumpPageType`" label-width="110px">
        <template v-for="(item, index) in pageTypes">
          <el-radio v-if="!disableTypes.includes(item.val)" v-model="linkObj.jumpPageType" :label="item.val" :key="index" @change="changeType(item)">{{item.name}}</el-radio>
        </template>
      </el-form-item>
      <el-form-item v-if="showJumpBtn" :label="`跳转：`" :prop="`${propPrefix}.jumpPageValue`" :rules="commonRules.notNullSelectRule" label-width="110px">
        <span>{{linkObj.jumpPageName||linkObj.jumpPageValue}}</span>
        <el-button type="primary" plain @click="chooseJump">请选择</el-button>
      </el-form-item>
      <el-form-item v-else-if="linkObj.jumpPageType === 7" label="商品分类：" :prop="`${propPrefix}.jumpPageValue`" label-width="110px">
        <el-select v-model="linkObj.jumpPageValue" placeholder="请选择, 默认所有分类" :loading="categoryLoading" clearable>
          <el-option v-for="(item, index) in categoryData" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-else-if="linkObj.jumpPageType === 50 || linkObj.jumpPageType === 51" label="小程序path:" :prop="`${propPrefix}.jumpPageValue`" label-width="110px">
        <el-input v-model="linkObj.jumpPageValue" placeholder="不填，默认小程序首页"></el-input>
      </el-form-item>
    </template>
  </div>
</template>
<script>
export default {
  name: 'LinkType',
  props: {
    propPrefix: {
      type: String,
      default: ''
    },
    titleRequire: {
      type: Boolean,
      default: false
    },
    linkObj: {
      type: Object,
      default() {
        return {}
      }
    },
    disableTypes: {
      type: Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      categoryData: [],
      categoryLoading: true,
      jumpTypes: [                 // 跳转类型
        { name: '无', val: 1},
        { name: 'URL', val: 2},
        { name: '内页', val: 3}
      ],
      pageTypes: [                 // 内页类型
        { name: '商品', val: 1},
        { name: '套餐', val: 2},
        { name: '活动', val: 5},
        { name: '商品分类', val: 7},
        { name: '箱起', val: 9},
        { name: '拼团', val: 10 },
        { name: '碧划算', val: 12},
        { name: '淘宝官方活动', val: 13},
        // { name: '碧选小程序', val: 50},
        { name: '碧选直播小程序', val: 51}
      ]
    }
  },
  computed: {
    showJumpBtn() {
      // 1：跳转商品、2：跳转套餐、5：跳转活动、13：淘宝官方活动
      return this.linkObj.jumpPageType === 1 || this.linkObj.jumpPageType === 2 || this.linkObj.jumpPageType === 5 || this.linkObj.jumpPageType === 13
    }
  },
  created() {
    this.getCategoryData()
  },
  methods: {
    getCategoryData() {
      this.categoryLoading = true
      this.request({
        url: '/bsnl-product/category/tree',
        method: 'get'
      }).then(({data}) => {
        this.categoryData = data.map(i => ({
          name: i.name,
          id: i.id + ''
        }))
        this.categoryLoading = false
      }).catch(err => {
        this.list = [];
        this.categoryLoading = false
      })
    },
    changeType(item){
      if(item.val ===9 || item.val === 10 || item.val === 12){
        this.linkObj.jumpPageValue = item.val
      } else {
        this.linkObj.jumpPageName = ''
        this.linkObj.jumpPageValue = ''
        this.$forceUpdate()
      }
    },
    // 跳转选择
    chooseJump(){
      if(this.linkObj.jumpPageType === 1){
        let checkData = this.linkObj.jumpPageValue ? [{
          goodsId: this.linkObj.jumpPageValue,
          name: this.linkObj.jumpPageName
        }] : []
        this.goodsChoose({ count: 1 }, checkData).then(val => {
          this.linkObj.jumpPageValue = val[0].goodsId
          this.linkObj.jumpPageName = val[0].name
        })
        return false;
      } else if(this.linkObj.jumpPageType === 2){
        let checkData = this.linkObj.jumpPageValue ? [{
          packageId: this.linkObj.jumpPageValue,
          name: this.linkObj.jumpPageName,
          type: this.linkObj.pack_type
        }] : []
        this.packageChoose({ count: 1 }, checkData).then(val => {
          this.linkObj.jumpPageValue = val[0].packageId
          this.linkObj.jumpPageName = val[0].name
          this.linkObj.pack_type = val[0].type
        })
        return false;
      } else if(this.linkObj.jumpPageType === 5){
        let checkData = [{
          id: this.linkObj.jumpPageValue,
          name: this.linkObj.jumpPageName
        }];
        this.activityChoose({ count: 1 }, checkData).then(val => {
          this.linkObj.jumpPageValue = val[0].id;
          this.linkObj.jumpPageName = val[0].name;
          this.$forceUpdate()
        });
        return false;
      } else if(this.linkObj.jumpPageType === 13){
        let checkData = [{
          id: this.linkObj.jumpPageValue,
          activityName: this.linkObj.jumpPageName,
          centerPage: this.linkObj.gotoWay === 1 ? 1 : 0
        }];
        if(!this.bhstaobaoActivity){
          return
        }
        this.bhstaobaoActivity(checkData, 1).then(val => {
          this.linkObj.jumpPageValue = val[0].id
          this.linkObj.jumpPageName = val[0].activityName
          this.linkObj.gotoWay = val[0].centerPage
          this.$forceUpdate()
        });
        return false;
      }
    }
  }
}
</script>
<style lang="scss">
.link-type-block{
  .el-select{
    width: 100%;
  }
  .el-form-item{
    margin-bottom: 5px;
  }
}
</style>